<!DOCTYPE html>
<html>
<head>
    <title>Conics</title>

    <script src="js/verb.min.js"></script>
    <script src="js/three.min.js"></script>
    <script src="js/verbToThreeConversion.js"></script>
    <script src="js/OrbitControls.js"></script>
    <script src="js/codemirror.js"></script>
    <script src="js/javascript.js"></script>
    <script src="js/threeBasic.js"></script>

    <link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,300' rel='stylesheet' type='text/css'>

    <link rel="stylesheet" href="css/codemirror.css">
    <link rel="stylesheet" href="css/example.css">
    <link rel="stylesheet" href="css/colorforth.css">
</head>
<body>

<div id="button">Show/Hide Code</div>
<div id="viewer" class="col">
    <div id="title"></div>
</div>
<div id="code-container" class="col scroll-y"></div>

</body>
<script id="script">
	setupScene();

	var arc =           new verb.geom.Arc([0,0,0], [1,0,0], [0,1,0], 5, 0, 3* Math.PI/2 );
	var circle =        new verb.geom.Circle([12,0,0], [1,0,0], [0,1,0], 5 );
	var ellipse =       new verb.geom.Ellipse([24,0,0], [5,0,0], [0,2,0] );
	var ellipseArc =    new verb.geom.EllipseArc([36,0,0], [5,0,0], [0,2,0], 0, 3* Math.PI/2 );
	var parabola =      new verb.geom.BezierCurve([[43,5,0], [48,-10,0], [51,5,0]] );

	addCurveToScene( circle.toThreeGeometry() );
    addCurveToScene( arc.toThreeGeometry() );
    addCurveToScene( ellipse.toThreeGeometry() );
    addCurveToScene( ellipseArc.toThreeGeometry() );
    addCurveToScene( parabola.toThreeGeometry() );

	renderScene();
</script>

<script src="js/example.js"></script>

</html>